<template>
	<view class="comment-box">
		<view class="header">
			<h1>评论列表</h1>
		</view>
		<view class="comment-item" v-for="(item,index) in list" :key="item.id">
			<view class="user-info">
				<view class="user">
					<u-avatar :src="item.avatar"></u-avatar>
					<text>{{item.username}}</text>
					<view class="sign bozhu" v-show="item.isMySelf">
						我
					</view>
				</view>
			</view>
			<view class="content">
				<text>
					{{item.content}}
				</text>
			</view>
			<view class="footer-info">
				<text class="time">{{item.createTime}}</text>
				<text class="ipadress">{{item.address}}</text>
				<text class="reply" @click="respondMsg(item.articleId,item.id,item.id,item.createBy)">回复</text>
				<text class="remove" @click="remove(item.id)" v-show="item.isMySelf">删除</text>
			</view>
			<!-- 二级评论列表 -->
			<view class="comment-item second" v-show="item.children" v-for="citem in item.children">
				<view class="user-info">
					<view class="user">
						<u-avatar :src="citem.avatar"></u-avatar>
						<text>{{citem.username}}</text>
						<text class="reply">回复</text>
						<text class="reply-user">{{ citem.toCommentUserName }}</text>
						<!-- 		<view class="sign bozhu">
							我
						</view> -->
					</view>
				</view>
				<view class="content">
					<text>
						{{citem.content}}
					</text>
				</view>
				<view class="footer-info">
					<text class="time">{{citem.createTime}}</text>
					<text class="ipadress">{{citem.address}}</text>
					<text class="reply" @click='respondMsg(item.articleId,item.id,citem.id,citem.createBy)'>回复</text>
					<text class="remove" @click="remove(citem.id)" v-show="citem.isMySelf">删除</text>
				</view>
			</view>
		</view>
		<!-- 回复评论模态框 -->
		<u-popup :show="show" mode="bottom" @close="close" @open="open">
			<view class="comment-input-wrap" :style="{'margin-bottom': inputTop + 'rpx'}">
				<view class="comment-textarea-box">
					<textarea :adjustPosition='false' @input="listenInput" @keyboardheightchange="handleKeyboardChange"
						class="comment-textarea" :maxlength="600" :placeholder="customPlaceholder" />
					<view class="limit">{{commentContent.length}} / 600</view>
				</view>
				<view class="relase-btn">
					<!-- 回复评论 -->
					<view @click="sendMsg" class="relase">
						回复</view>
				</view>
			</view>
		</u-popup>
		<u-loadmore :status="hasMore" />
	</view>
</template>

<script>
	import {
		delComment,
		getArticleComment,
		sendComment
	} from '../../api/comment';
	export default {
		name: "comment-box",
		props: {
			articleId: {
				type: String
			}
		},
		data() {
			return {
				list: [],
				queryParams: {
					pageNum: 1,
					pageSize: 5,
					articleId: ""
				},
				commentContent: "",
				showInput: false,
				show: false,
				inputTop: 0,
				aid: 0, //文章id
				type: 0,
				rootId: -1, //根评论id
				toCommentId: -1, //所回复评论的id
				toCommentUserId: -1, //所评论的用户ids
				hasMore: "loadmore",
			}
		},
		onReachBottom() {
			this.getList()
		},
		mounted() {
			this.queryParams.articleId = this.articleId
			this.getList()
		},
		beforeMount() {
			uni.$on('onReachBottom', () => { // 监听上拉加载
				this.getList()
			})
		},
		destroyed() {
			uni.$off('onReachBottom') // 销毁onReachBottom监听
		},
		methods: {
			//删除本人的评论
			remove(id) {
				let that = this
				const userinfo = uni.getStorageSync('user-info') || null
				uni.showModal({
					title: '系统提示',
					content: '确定删除该评论吗？',
					success: function(res) {
						if (res.confirm) {
							delComment(id).then(() => {
								that.queryParams.pageNum = 1
								getArticleComment(that.queryParams).then(res => {
									that.queryParams.pageNum++
									that.list = res.rows
									for (var i = 0; i < that.list.length; i++) {
										if (userinfo != null && userinfo.id == that.list[i]
											.createBy) {
											that.list[i].isMySelf = true
										} else {
											that.list[i].isMySelf = false
										}
										for (var j = 0; j < that.list[i].children
											.length; j++) {
											if (userinfo != null && userinfo.id == that.list[i]
												.children[j]
												.createBy) {
												that.list[i].children[j].isMySelf = true
											} else {
												that.list[i].children[j].isMySelf = false
											}
										}
									}
								})
								uni.$u.toast('删除成功')
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getList() {
				getArticleComment(this.queryParams).then(res => {
					const total = res.total
					const userinfo = uni.getStorageSync('user-info') || null
					// 给bottom-comment组件传值
					uni.$emit('changeTotal', total)
					if (total <= this.list.length) {
						this.hasMore = "nomore"
					} else {
						this.hasMore = "loading"
						this.list = this.list.concat(res.rows)
						this.queryParams.pageNum++
					}
					// 判断是否是登录用户的评论
					for (var i = 0; i < this.list.length; i++) {
						if (userinfo != null && userinfo.id == this.list[i].createBy) {
							this.list[i].isMySelf = true
						} else {
							this.list[i].isMySelf = false
						}
						for (var j = 0; j < this.list[i].children.length; j++) {
							if (userinfo != null && userinfo.id == this.list[i].children[j].createBy) {
								this.list[i].children[j].isMySelf = true
							} else {
								this.list[i].children[j].isMySelf = false
							}
						}
					}
				})
			},
			// 回复评论
			respondMsg(aId, rootId, toCommentId, toCommentUserId) {
				this.showTextarea()
				this.aid = aId
				this.rootId = rootId
				this.toCommentId = toCommentId;
				this.toCommentUserId = toCommentUserId
			},
			sendMsg() {
				sendComment(this.type, this.aid, this.rootId, this.toCommentId, this.toCommentUserId, this.commentContent)
					.then((
						response) => {
						this.show = false
						this.commentContent = '';
						this.rootId = -1;
						this.toCommentId = -1;
						this.toCommentUserId = -1;
						uni.showToast({
							title: '评论需要审核',
							duration: 2000
						});
					})
			},
			handleKeyboardChange() {
				// 监听窗口大小变化
				uni.onKeyboardHeightChange((res) => {
					console.log(res);
					if (res.height) {
						this.inputTop = res.height + 300; // 键盘弹出时，输入框向上移动
					} else {
						this.inputTop = 0; // 键盘收起时，输入框恢复原位
					}
				});
				console.log(this.inputTop);
			},
			showTextarea() {
				this.show = true
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			listenInput(e) {
				this.commentContent = e.detail.value
				console.log(this.commentContent.length);
			},
		}
	}
</script>

<style lang="scss">
	.comment-box {
		padding: 30rpx;
		padding-bottom: 180rpx;

		.header {
			width: 115rpx;
			line-height: 50rpx;
			border-bottom: black 4rpx solid;

			h1 {
				font-weight: bolder;
			}
		}

		.comment-item {
			padding-top: 30rpx;
			line-height: 65rpx;

			&.second {
				margin-left: 80rpx;
				background-color: rgb(249, 249, 249);
			}

			.user-info {
				.user {
					display: flex;
					align-items: center;

					text {
						font-size: 35rpx;
						font-weight: bolder;
						padding-left: 20rpx;
					}

					text:not(:first-child) {
						padding-left: 20rpx;
					}
				}

				.sign {

					&.me {
						background-color: rgb(62, 187, 175);
					}

					&.bozhu {
						background-color: orangered;
					}

					line-height: 30rpx !important;
					margin-left: 10rpx;
					padding: 5rpx;
					border-radius: 5rpx;
					color: white;
					font-size: 22rpx;
					margin-top: -20rpx;

				}
			}

			.content {
				margin-left: 85rpx;
				line-height: 46rpx;

				text {
					font-size: 35rpx;
				}
			}

			.footer-info {
				margin-left: 85rpx;

				text {
					color: #777;
				}

				text:not(:first-child) {
					padding-left: 20rpx;
				}

				.reply {
					color: #1DBFB6;
				}

				.remove {
					color: #868686;
				}
			}
		}

		.comment-input-wrap {
			padding: 20rpx 30rpx;
			display: flex;
			flex-direction: column;


			.comment-textarea-box {
				position: relative;

				.comment-textarea {
					border-radius: 20rpx;
					height: 160rpx;
					width: auto;
					background-color: #f6f6f6;
					font-size: 26rpx;
					padding: 20rpx;
				}

				.limit {
					// 定位到textarea 的 右下角
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
					font-size: 20rpx;
					color: #767676;
				}
			}

			.relase-btn {
				display: flex;
				justify-content: space-between;
				// align-items: center;
				margin-top: 10rpx;

				.limit {
					font-size: 24rpx;
					color: #767676;
				}

				.relase {
					background-color: rgb(61, 187, 175);
					border-radius: 10rpx;
					font-size: 26rpx;
					color: #fff;
					position: absolute;
					right: 35rpx;
					padding: 10rpx 20rpx;
				}
			}
		}
	}
</style>